<!-- <template>
	<view class="member">
		<view class="member_top">
			<image src="@/static/member/c47b048175b325b1e78f837a3b696794.png" mode="widthFix"></image>
			<image src="@/static/member/f09ef51624e48d7d8c58cd602110c46e.png" mode="widthFix"></image>
		</view>
		<view class="member_box">
			<image class="member_box_shezhi" src="@/static/member/9464fe770d388c7982df73b2d1b1d457.png" mode=""
				@click="toFun('/pages/member/set/set')"></image>
			<view class="member_box_HeadShot">
				<view class="member_box_HeadShot_box"></view>
				<view class="member_box_HeadShot_left">
					<view class="member_box_HeadShot_box_image" @click="LoGinOpenFun">
						<image :src="res.avatar?res.avatar:'../../static/member/default_avatar.png'">
						</image>
					</view>
					<view class="member_box_HeadShot_box_name">
						{{res?res.nickname:'请先登录'}}
					</view>
				</view>
				<view class="member_box_HeadShot_right">
					<image src="@/static/member/f09ef51624e48d7d8c58cd602110c46e.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="member_box_OrdeForm">
				<view class="member_box_OrdeForm_box">
					<view v-for="(item,index) in OrdeFormList" class="member_box_OrdeForm_box_item"
						:class="OrdeFormList.length - 1 === index?'Finally':'flex1'" :key="index">
						<image :src="item.Image" mode=""></image>
						<view class="member_box_OrdeForm_box_item_title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<view class="member_box_OrdeForm">
				<view class="member_box_OrdeForm_box">
					<view v-for="(item,index) in CouponsList" class="member_box_OrdeForm_box_item"
						:class="CouponsList.length - 1 === index?' Finally':'flex1'" :key="index">
						<image :src="item.Image" mode=""></image>
						<view class="member_box_OrdeForm_box_item_title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<view class="member_box_OrdeForm">
				<view class="member_box_OrdeForm_box">
					<view class="member_box_OrdeForm_box_item flex1"
						@click="toFun('/pages/member/Details/Details?type=credit2&title=余额')">
						<view class="member_box_OrdeForm_box_item_text">
							{{res?res.credit2:'--'}}元
						</view>
						<view class="member_box_OrdeForm_box_item_title">
							账户余额
						</view>
					</view>
					<view class="member_box_OrdeForm_box_item flex1"
						@click="toFun('/pages/member/Details/Details?type=qyjf&title=积分')">
						<view class="member_box_OrdeForm_box_item_text">
							{{res?0:'--'}}个
						</view>
						<view class="member_box_OrdeForm_box_item_title">
							积分
						</view>
					</view>
					<view class="member_box_OrdeForm_box_item flex1">
						<view class="member_box_OrdeForm_box_item_text">
							{{res?'0':'--'}}张
						</view>
						<view class="member_box_OrdeForm_box_item_title">
							优惠券
						</view>
					</view>
					<view class="member_box_OrdeForm_box_item Finally">
						<image src="@/static/member/wallet_icon.png" mode=""></image>
						<view class="member_box_OrdeForm_box_item_title">
							我的钱包
						</view>
					</view>
				</view>
			</view>

			<view class="member_box_OrdeForm">
				<view class="member_box_OrdeForm_box" style="flex-direction: column;">
					<view class="member_box_OrdeForm_box_DTB">
						<view class="member_box_OrdeForm_box_DTB_left">
							<image src="@/static/member/58fe6c2a400d6d18a43949f3d8c58021.png" mode=""></image>
							云创原值
						</view>
						<view class="member_box_OrdeForm_box_DTB_right"
							@click="toFun('/pages/member/Details/Details?type=mjf&title=抖推币')">
							明细 <image src="@/static/member/left_jiantou.png" mode=""></image>
						</view>
					</view>
					<view class="member_box_OrdeForm_box_bottom">
						<view class="flex1">
							<p>总数量</p>
							<p>{{res?res.qyjf:0.00}}</p>
						</view>
						<view class="flex1">
							<p>总价值</p>
							<p>{{res?res.all_jz:0.00}}</p>
						</view>
						<view class="flex1">
							<p>可使用</p>
							<p>{{res?res.mjf:0.00}}</p>
						</view>
						<view class="flex1">
							<p>待使用</p>
							<p>{{res?daishiyong:0.00}}</p>
						</view>
					</view>
				</view>
			</view>

			<view class="member_box_CommonlyUsed">
				<view class="member_box_CommonlyUsed_box">
					<view class="member_box_CommonlyUsed_box_item" v-for="(item,index) in CommonlyUsed" :key="index"
						@click="toFun(item.pages)">
						<image :src="item.image" mode=""></image>

						<p style="margin-top: 20rpx;">{{item.title}}</p>
					</view>
				</view>
			</view>
		</view>
		<app-login ref="login" @ShutDown='ShutDownFun'></app-login>
		<app-tab :current='3'></app-tab>
	</view>
</template>

<script>
	import {
		member
	} from '@/api/member.js'
	export default {
		data() {
			return {
				daishiyong: '',
				equipment: '',
				res: '',
				openid: '',
				OrdeFormList: [{
						Image: '../../static/member/no_pay.png',
						title: '待付款'
					},
					{
						Image: '../../static/member/no_take.png',
						title: '待收货'
					},
					{
						Image: '../../static/member/no_comment.png',
						title: '待评价'
					},
					{
						Image: '../../static/member/change_order.png',
						title: '售后单'
					},
					{
						Image: '../../static/member/all_order.png',
						title: '全部订单'
					}
				],
				CouponsList: [{
					Image: '../../static/member/nouse_coupon.png',
					title: '已领取'
				}, {
					Image: '../../static/member/useend_coupon.png',
					title: '已使用'
				}, {
					Image: '../../static/member/out_coupon.png',
					title: '已失效'
				}, {
					Image: '../../static/member/all_coupon.png',
					title: '领券中心'
				}, ],
				CommonlyUsed: [{
						image: '../../static/member/9ff8442f8cda57f88aac61059d7d3f21.png',
						title: '签到',
						pages: '/pages/home/signIn/signIn'
					},
					// {
					// 	image: '../../static/member/29559cc94ff33b1f39f570c5f7bc37c1.png',
					// 	title: '充值',
					// 	pages: ''
					// },
					{
						image: '../../static/member/3c7eb06563d1cf28b4b34bb0d1647659.png',
						title: '邀请码',
						pages: '/pages/member/InvitationCode/InvitationCode'
					},
					{
						image: '../../static/member/26dff8fb21473e219c6f024fc6a5e39a.png',
						title: '地址',
						pages: '/pages/member/addressList/addressList'
					},
					{
						image: '../../static/member/9464fe770d388c7982df73b2d1b1d457.png',
						title: '设置',
						pages: '/pages/member/set/set'
					}
				]

			}
		},
		onShow() {
			// uni.hideTabBar()
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					console.log(res);
					this.memberFun();
				}
			});

		},
		methods: {
			toFun(url) {
				if (!url) {
					this.showinteraction('暂未开放');
					return
				}
				if (this.openid) {
					uni.navigateTo({
						url
					})
				} else {
					this.$refs.login.open();
				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async memberFun() {
				let data = await member(this.openid);
				this.res = data;
				const num = data.qyjf - data.mjf;
				this.daishiyong = num.toFixed(2);



			},
			ShutDownFun(e) {
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data;
						this.memberFun();
					}
				});
			},
			LoGinOpenFun() {
				if (this.openid) {
					uni.navigateTo({
						url: '/pages/member/edit_personage_information/edit_personage_information'
					})
				} else {
					this.$refs.login.open();

				}
			},
		}
	}
</script>

<style lang="scss">
	.member {
		width: 100%;
		height: 100vh;
		padding-top: calc(var(--status-bar-height));
		display: flex;
		flex-direction: column;

		.member_top {
			width: 100%;
			height: 88rpx;
			background-image: url('@/static/member/283592b4d4f74d84b530035fa7265d73.png');
			background-size: 100%;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				margin: 0 0 0 32rpx;
			}



		}

		.member_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;
			background-color: #F6F6F6;
			position: relative;

			.member_box_shezhi {
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				z-index: 1000;
				right: 50rpx;
			}

			.member_box_HeadShot {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				padding: 100rpx 40rpx 0 40rpx;
				margin-bottom: 30rpx;


				.member_box_HeadShot_box {
					width: 100%;
					height: 300rpx;
					position: absolute;
					top: -100rpx;
					left: 0;
					background: url("@/static/member/283592b4d4f74d84b530035fa7265d73.png");
					filter: blur(6px);
					background-repeat: no-repeat;
					background-position: 0 0rpx;
					background-size: 110%;
				}

				.member_box_HeadShot_left {
					display: flex;
					align-items: center;

					.member_box_HeadShot_box_image {
						margin-right: 20rpx;
						border-radius: 100rpx;
						overflow: hidden;
						height: 100rpx;
						width: 100rpx;

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}


				.member_box_HeadShot_right {
					image {
						width: 40rpx;
					}
				}
			}

			.member_box_OrdeForm {
				width: 100%;
				padding: 10rpx 20rpx;

				.member_box_OrdeForm_box {
					width: 100%;
					background-color: #fff;
					border-radius: 20rpx;
					overflow: hidden;
					display: flex;
					justify-content: space-around;
					// padding: 0 20rpx;

					.member_box_OrdeForm_box_item {
						height: 160rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.member_box_OrdeForm_box_item_text {
							height: 50rpx;
							font-size: 24rpx;
							line-height: 50rpx;
							color: #303030;
						}

						image {
							width: 44rpx;
							height: 44rpx;
						}

						.member_box_OrdeForm_box_item_title {
							font-size: 24rpx;
							margin-top: 24rpx;
							color: #333;
						}
					}

					.flex1 {
						flex: 1;
					}

					.Finally {
						width: 142rpx !important;
					}


					.member_box_OrdeForm_box_DTB {
						width: 100%;
						height: 80rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						justify-content: space-between;



						.member_box_OrdeForm_box_DTB_left {
							display: flex;
							align-items: center;

							image {
								width: 44rpx;
								height: 44rpx;
								margin: 0 10rpx;
							}

						}

						.member_box_OrdeForm_box_DTB_right {
							height: 50rpx;
							border-radius: 100rpx;
							background-color: #DEAD6A;
							display: flex;
							align-items: center;
							padding: 0 20rpx;
							font-size: 26rpx;
							color: #fff;

							image {
								width: 34rpx;
								height: 34rpx;
								margin-left: 10rpx;
								background-color: #fff;
								border-radius: 100rpx;
							}
						}


					}

					.member_box_OrdeForm_box_bottom {
						display: flex;

						.flex1 {
							flex: 1;
							height: 100rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							color: #333;

							p {
								padding: 5rpx 0;
							}

							// h3 {
							// 	color: #5E6D82;
							// }
						}
					}
				}

			}


			.member_box_CommonlyUsed {
				width: 100%;
				padding: 10rpx 20rpx;

				.member_box_CommonlyUsed_box {
					width: 100%;
					display: flex;
					border-radius: 20rpx;
					background-color: #fff;
					flex-wrap: wrap;

					.member_box_CommonlyUsed_box_item {
						width: 25%;
						height: 176rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						p {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}





























			.member_box_height {
				height: 100vh;
			}
		}

	}
</style> -->



<template>
	<view class="member">
		<view class="member_title">
			<view class="member_title_box">

			</view>
			<view class="member_title_box">
				云创原值交易中心
			</view>
			<view class="member_title_box">
				<p style="text-align: right;color: #999;" @click="toFun('/pages/member/set/set')">设置</p>
			</view>
		</view>
		<view class="member_box">
			<view class="member_box_top">
				<p>我的云创原值总价值</p>
				<h4>{{res?res.all_jz:0.00}}</h4>
			</view>

			<view class="member_box_balance" @click="toFun('/pages/member/Details/Details?type=credit2&title=余额')">
				当前账户余额<text>{{res.credit2?res.credit2:'0.00'}}</text>元
				<view class="member_box_balance_positioning"
					@click.stop="toFun('/pages/member/Transaction/Transaction')">
					去交易
				</view>
			</view>

			<view class="member_box_Details">
				<uv-grid :border="true" col='2'>
					<uv-grid-item>
						<view class="member_box_Details_item">
							<h4>{{res?res.qyjf:0.00}}</h4>
							<p>总数量</p>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="member_box_Details_item">
							<h4>{{res?res.all_jz:0.00}}</h4>
							<p>总价值</p>
						</view>
					</uv-grid-item>
					<uv-grid-item @click="toFun('/pages/member/Details/Details?type=mjf&title=可用')">
						<view class="member_box_Details_item">
							<h4>{{res?res.mjf:0.00}}</h4>
							<p>可使用</p>
						</view>
					</uv-grid-item>
					<uv-grid-item>
						<view class="member_box_Details_item">
							<h4>{{res?daishiyong:0.00}}</h4>
							<p>待使用</p>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			<view class="member_box_qushi">
				<l-echart ref="chart"></l-echart>
			</view>

		</view>
		<app-login ref="login" @ShutDown='ShutDownFun'></app-login>
	</view>
</template>
<script>
	import {
		member
	} from '@/api/member.js';

	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				res: '',
				openid: '',
				chartData: {},
				option: {
					tooltip: {
						trigger: 'axis',
						position: function(point, params, dom, rect, size) {

							return [100, '0'] //返回x、y（横向、纵向）两个点的位置
						},
						formatter: function(params) {
							const chartData = params[0]
							return ` 当时价  ${chartData.value}`
						}
					},

					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							show: true, // 显示x轴上的标签

							formatter: function(value) {
								// 在这里可以根据需要返回自定义的提示文字
								// 例如，如果希望在每个标签后面加上"年份"，可以这样返回：

								return value;
							}
						},
						axisLine: {
							show: true, // 关闭x轴上的轴线
							lineStyle: {
								color: '#000'
							}
						},
						axisTick: {
							show: true, // 关闭x轴上的刻度线
						},
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
						lineStyle: {
							color: 'red'
						}
					},

					yAxis: {
						type: 'value',
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
						min: 'dataMin',
						show: true,
						axisLabel: {
							interval: 0,
							rotate: 0,
							// fontSize: 8,
							color: '#000'
						},
						lineStyle: {
							color: 'red',

						}
					},
					series: [{
						data: [],
						type: 'line',
						animation: true, // 启用动画效果
						lineStyle: {
							color: '#D95B42'

						},
						itemStyle: {
							color: '#D95B42'
						}
					}]
				},
			}
		},
		onShow() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.memberFun();
				},
				fail: () => {
					this.showinteraction('请先登录');
					setTimeout(() => {
						this.$refs.login.open();
					}, 1000)
				}
			});



		},
		mounted() {
			if (this.$refs.chart) {
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
				this.$refs.chart.resize({
					width: 390,
					height: 260
				})
			}
		},
		methods: {

			echarts_dta(value) {
				let _this = this;
				var a = function(value, type) {
					var arr = [];
					for (var i = 0; i < value.length; i++) {
						if (type == 'time') {
							console.log(new Date(value[i][type] * 1000).getDate());
							// // 获取小时
							// var hours = new Date(value[i][type] * 1000).getHours();

							// // 获取分钟
							// var minutes = new Date(value[i][type] * 1000).getMinutes();

							// var tp = new Date(value[i][type] * 1000).getDate()
							// var month = new Date(value[i][type] * 1000).getMonth() + 1;


							// var str = `${tp}:${month}`

							// var str = _this.timestampToDate(value[i][type]);


							const date = new Date(value[i][type] * 1000); // 将时间戳转换为Date对象
							const options = {
								// year: 'numeric',
								month: 'long',
								day: 'numeric'
							}; // 定义日期格式
							arr.push(new Intl.DateTimeFormat('zh-CN', options).format(date));
						} else {
							arr.push(value[i][type])
						}

					}

					return arr;
				};
				var time_arr = a(value, 'time')
				var price_arr = a(value, 'price')

				// time_arr.push('')
				// time_arr.push('')

				console.log(price_arr, '---------------------', time_arr);

				this.option.xAxis.data = time_arr;
				this.option.series[0].data = price_arr;


				if (this.$refs.chart) {
					this.$refs.chart.resize({
						width: 390,
						height: 260
					})
					this.$refs.chart.init(echarts, chart => {
						chart.setOption(this.option);
					});
				}






			},







			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			ShutDownFun(e) {
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data;
						this.memberFun();
					}
				});
			},
			async memberFun() {
				let data = await member(this.openid);
				console.log(data);
				this.res = data;
				const num = data.qyjf - data.mjf;
				this.daishiyong = num.toFixed(2);
				this.echarts_dta(data.k_line_data);
			},
			toFun(url) {
				if (!url) {
					this.showinteraction('暂未开放');
					return
				}
				if (this.openid) {
					uni.navigateTo({
						url
					})
				} else {
					this.$refs.login.open();
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.member {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);

		.member_title {
			width: 100%;
			height: 88rpx;
			border-bottom: 2rpx solid #F6F6F6;
			display: flex;
			padding: 0 20rpx;

			.member_title_box {
				flex: 1;
				height: 100%;
				font-size: 26rpx;
				line-height: 88rpx;
				text-align: center;
			}

		}

		.member_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;

			background-color: #fff;
			// display: flex;
			// flex-direction: column;
			// align-items: center;

			.member_box_top {
				width: 400rpx;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 400rpx;
				box-shadow: 0 0 20rpx #ccc;
				margin: 20rpx auto;

				P {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 20rpx;
				}

				h4 {
					font-size: 50rpx;
					width: 100%;
					text-align: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					text-wrap: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.member_box_balance {
				width: 90%;
				height: 88rpx;
				background-color: #fff;
				margin: 20rpx auto;
				box-shadow: 0 0 20rpx #ccc;
				border-radius: 20rpx;
				line-height: 88rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				color: #333;
				position: relative;

				text {
					font-size: 30rpx;
					padding: 0 10rpx;
					font-weight: 600;
				}

				.member_box_balance_positioning {
					color: #D95B42;
					font-size: 26rpx;
					position: absolute;
					margin: auto;
					right: 20rpx;
					top: 0;
					bottom: 0;
				}
			}

			.member_box_Details {
				width: 90%;
				margin: 40rpx auto;
				box-shadow: 0 0 20rpx #ccc;
				border-radius: 20rpx;

				.member_box_Details_item {
					width: 100%;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					h4 {
						width: 100%;
						text-align: center;
						margin-bottom: 10rpx;
						font-size: 36rpx;
						text-overflow: ellipsis;
						text-wrap: nowrap;
						overflow: hidden;
						padding: 0 20rpx;
						box-sizing: border-box;
					}

					p {
						width: 100%;
						text-align: center;
						padding: 0 10rpx;
						box-sizing: border-box;
						color: #9C9C9C;
						font-size: 26rpx;
					}
				}
			}

			.member_box_qushi {
				width: 100%;
				overflow: hidden;
			}
		}
	}
</style>